<template>
  <div class="Mainbox">
      <!-- 收货地址 -->
    <heads v-show="!postadr" class="HeadTop1">
        <i @click="zhu1()"></i>
        <span>客服与反馈</span>
        <em @click="feedBack1()">反馈</em>
    </heads>
    <mains>
        <div>
            <div class="feedback">
                <div class="feedAction w">
                    <div><i>安全提醒：</i><span>阿拉灯不会以付款异常、系统升级等原因让顾客进
    行银行账户修改。请勿相信陌生电话、短信内容，阿拉灯提醒您
    谨防网络诈骗！</span><em>查看详情》</em></div>
                </div>
            </div>
            <template>
                <div class="ftitle w">
                    <h3>{{arr1.tit}}</h3>
                    <h3 >工作时间：<span>{{arr1.workTime}}</span></h3>
                </div>
                <template v-for="(item,v1) in arr1.list" >
                    <div :key="v1" class="foodlist w">
                        <div class="foodlist1" @click="change(v1)">
                            <i :class="'index'+(v1+1)"></i>
                            <div class="foodlist1aa">
                                <span>{{item.n}}</span>
                                <span>{{item.txt}}</span>
                            </div>
                            <i></i>
                        </div>
                    </div>
                </template>
                <div class="ftitle w">
                    <h3>{{arr2.tit}}</h3>
                </div>
                <template v-for="(item,v2) in arr2.list">
                    <div :key="'info'+v2" class="foodlist2" @click="change2(v2)">
                    <div class="foodlist2aa">
                        <div>{{item}}<i class="el-icon-arrow-right"></i></div>
                    </div>
                    </div>
                </template>
            </template>
    </div>


    </mains>
      
  </div>
</template>

<script>
import Head from './Head.vue';
import Main from './Main.vue';
export default {
    name:'Address',
    data(){
        return{
            bol:false,
            postadr:false,
            arr1:this.$store.state.feedBack1[0],
            arr2:this.$store.state.feedBack1[1],
        }
    },components:{
        'heads':Head,
        'mains':Main,
    },methods:{
        postAdr(){
            this.postadr=!this.postadr;
            console.log(this.postadr);
        },zhu1(){
            this.$router.replace('/login');
        },
        feedBack1(){
            this.$router.replace('/feedb1');
        },
        zhu2(){
            this.postadr=!this.postadr;
        },insert(){
            console.log(this.name);
        },
        change(v1){
            console.log(v1);
        },change2(v2){
            console.log(v2);
            this.$router.replace('/Kefu');
        }
    }

}
</script>

<style scoped>
.w{
    width: calc(100% - 4rem );
    padding: 0 2rem ;
}
.red{
    color: #e53e42;
}
/*  */
.feedback{
    background-color: #f9d3d4;
    padding: 1.6rem 0 1.3rem;
}
.feedAction{
    line-height: 3.6rem;
    text-align: left;
}
.feedAction i{
    color: #e53e42;
    font-size: 2.8rem;
}
.feedAction span{
    font-size: 2.4rem;
    color: #666;
}
.feedAction em{
    font-size: 2.8rem;
    color: #4c4c4c;
}
.ftitle{
    display: flex;
    /* background-color: #f0f; */
}
.ftitle h3{
    flex: 1;
    padding-top: 1rem;
    line-height: 6.6rem;
    height: 6.6rem;
    font-size: 2.8rem;
    color: #4c4c4c;
}
.ftitle h3:nth-child(1){
    text-align: left;
}
.ftitle h3:nth-child(2){
    text-align: right;
}
.ftitle h3:nth-child(2) span{
    color: #e53e42;
}
.foodlist{
    flex-direction: column;
}
.foodlist1 i.index1{
    background: url(../../assets/user/user-ff1.png) no-repeat 0 0 ;
}
.foodlist1 i.index2{
    background: url(../../assets/user/user-ff2.png) no-repeat 0 0 ;
}
.foodlist1 i.index3{
    background: url(../../assets/user/user-ff3.png) no-repeat 0 0 ;
}
.foodlist1 i.index4{
    background: url(../../assets/user/user-ff4.png) no-repeat 0 0 ;
}
.foodlist1{
    height: 13.8rem;
    display: flex;
    flex: 1;
    margin-bottom: 2rem;
    background-color: #fff;
    border: #ccc 0.1rem solid ;
    position: relative;
}
.foodlist1 i{
    position: absolute;
}
.foodlist1 i:nth-of-type(1){
    height: 8rem;
    width: 8rem;
    outline: 0.1rem solid #cccccc;
    top: calc(50% - 4rem);
    left: 1.8rem;
}
.foodlist1 i:nth-of-type(2){
    height: 2.4rem;
    width: 1.4rem;
    /* outline: 0.1rem solid #cccccc; */
    top: calc(50% - 1.2rem);
    right: 2rem;
    background: url(../../assets/user/user-yjian2.png) no-repeat 0 0;
    
}
.foodlist1 .foodlist1aa{
    position: absolute;
    top: 0;
    height: 12.6rem;
    /* background-color: #f00; */
    width: calc(100% - 20rem);
    left: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: left;
    padding: 0.6rem;
}
.foodlist1aa span:nth-of-type(1){
    color: #4c4c4c;
    font-size: 3.6rem;
}
.foodlist1aa span:nth-of-type(2){
    color: #8080;
    font-size: 2.4rem;
}
.foodlist2{
    width: 100%;
    background-color: #fff;

}
.foodlist2aa{
    height: 6rem;
    width: calc(100% - 4rem);
    border-bottom: #ccc 0.1rem solid ;
    line-height: 6rem;
    font-size: 2.8rem;
    color: #4c4c4c;
    text-align: left;
    margin: 0 2rem ;
    position: relative;
}
.foodlist2aa i{
    position: absolute;
    right: 0;
    top: calc(50% - 1.2rem);
    width: 2.4rem;
    height: 2.4rem;
}
/* 公用 */
.Mainbox{
    font-size: 0;
}
.HeadTop1 i:nth-child(1){
    height: 3.8rem;
    width: 3.8rem;
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-1.9rem);
    background: url(../../assets/user/user-wback.png) no-repeat 0 0;
}
.HeadTop1 em{
    height: 9.6rem;
    line-height: 9.6rem;
    position: absolute;
    right: 2rem;
    top: 0;
    font-size: 3rem;
}

</style>